<template>
	<view class="page-body">
		<view class="input">
			<input @input="bindKeyInput" @blur="bindBlur" placeholder="输入城市名或拼音查询" placeholder-style="font-size: 30upx"
			 v-model="inputName" class="inputsearch"></input>
		</view>

		<view class="container-inner">
			<view class="searchLetter touchClass">
				<scroll-view scroll-y :style="{'height':winHeight+'px'}">
				<view class="thishotText" @tap="totop">
					<view style="padding-top:10upx;">当前</view>
					<view style="padding-top:0;">热门</view>
				</view>
				<view v-for="(item,i) in searchLetter" :key="i" :style="{'height':item.tHeight+'px','line-height':item.tHeight+'px'}" :data-letter="item.name"
				 @touchend="clickLetter">{{item.name}}</view>
				 </scroll-view>
			</view>
			<view class="container">
				<block v-if="isShowLetter">
					<view class="showSlectedLetter">
						{{toastShowLetter}}
					</view>
				</block>
				<scroll-view scroll-y="true" :style="{'height':winHeight+'px'}"  :scroll-into-view="scrollTopId">
					<view class="ul" id="AB">
						<view v-for="(item,index) in completeList" :key="index"  @tap="bindCity" :data-city="item.city" :data-code="item.code"
						 class="li">{{item.city}}</view>
					</view>
					<view class="selectCity">
						<view class="hotcity-common" @tap="">重新定位城区</view>
						<view class="thisCityName" :data-city="city" :data-code="currentCityCode" @tap="bindCity">{{city}}</view>

						<view class="hotcity-common">热门城市</view>
						<view class="weui-grids">
							<view class="weui-grid" data-code="110000" data-city="北京市" @tap="bindCity">
								<view class="weui-grid__label">北京市</view>
							</view>
							<view class="weui-grid" data-code="310000" data-city="上海市" @tap="bindCity">
								<view class="weui-grid__label">上海市</view>
							</view>
							<view class="weui-grid" data-code="440100" data-city="广州市" @tap="bindCity">
								<view class="weui-grid__label">广州市</view>
							</view>
						</view>
						<view class="weui-grids">
							<view class="weui-grid" data-code="440300" data-city="深圳市" @tap="bindCity">
								<view class="weui-grid__label">深圳市</view>
							</view>
							<view class="weui-grid" data-code="330100" data-city="杭州市" @tap="bindCity">
								<view class="weui-grid__label">杭州市</view>
							</view>
							<view class="weui-grid" data-code="320100" data-city="南京市" @tap="bindCity">
								<view class="weui-grid__label">南京市</view>
							</view>
						</view>
						<view class="weui-grids">
							<view class="weui-grid" data-code="420100" data-city="武汉市" @tap="bindCity">
								<view class="weui-grid__label">武汉市</view>
							</view>
							<view class="weui-grid" data-code="120000" data-city="天津市" @tap="bindCity">
								<view class="weui-grid__label">天津市</view>
							</view>
							<view class="weui-grid" data-code="610100" data-city="西安市" @tap="bindCity">
								<view class="weui-grid__label">西安市</view>
							</view>
						</view>
					</view>

					<view class="selection" v-for="(item,idx) in cityList" :key="idx">
						<view class="item_letter" :id="item.initial">{{item.initial}}</view>
						<view class="item_city" v-for="ct in item.cityInfo"  :key="ct.id" :data-code="ct.code" :data-city="ct.city"
						 @click="bindCity">
							{{ct.city}}
						</view>
					</view>
				</scroll-view>
			</view>
		</view>

	</view>
</template>
<script>
	const city = require('./city.js');
	import {mapState,mapMutations} from 'vuex'
	import {mapKey} from '@/utils/Config';
	import {GetLocation} from '@/utils/utils.js'
	var that;
	export default {
		data(){
			return{
				searchLetter: [],
				toastShowLetter: "",
				showLetter: "",
				winHeight: 0,
				cityList: [],
				isShowLetter: false,
				// scrollTop: '',//置顶高度
				scrollTopId: '',//置顶id
				city: "定位中",
				currentCityCode: '',
				hotcityList: [{ cityCode: 110000, city: '北京市' }, { cityCode: 310000, city: '上海市' }, { cityCode: 440100, city: '广州市' }, { cityCode: 440300, city: '深圳市' }, { cityCode: 330100, city: '杭州市' }, { cityCode: 320100, city: '南京市' }, { cityCode: 420100, city: '武汉市' },  { cityCode: 120000, city: '天津市' }, { cityCode: 610100, city: '西安市' }, ],
				commonCityList: [{ cityCode: 110000, city: '北京市' }, { cityCode: 310000, city: '上海市' }],
				inputName: '',
				completeList: [],//搜索查询结果
				county: '',
				condition: false,
				latitude:"",
				longitude:""
				// page:''
			}
		},
		components: {
			
		},
		computed:mapState(['cityname']),
		methods: {
			...mapMutations(['locationcity']),
			clickLetter:function(e){
				let showLetter = e.currentTarget.dataset.letter;
				this.toastShowLetter=showLetter;
				this.isShowLetter=true;
				this.scrollTopId=showLetter;
				setTimeout(function () {
					that.isShowLetter=false
				}, 500)
			},
			bindCity(e){
				 let city=e.currentTarget.dataset.city;
				 this.city=city;
				 this.currentCityCode=e.currentTarget.dataset.code
				 this.completeList=[];
				 console.log(city,'选择城市')
				 // 根据城市名获取坐标
				 // uni.request({
					// 	url:`https://apis.map.qq.com/ws/geocoder/v1/?address=${city}&key=${mapKey}`,
					// 	success: res=> {
					// 			let latitude =res.data.result.location.lat
					// 			let longitude = res.data.result.location.lng;
					// 			that.longitude=longitude;
					// 			that.latitude=latitude;
					// 			that.setLocationState()//vuex保存城市信息
					// 	}
				 // })	
				 this.totop()
				 wx.switchTab({
				 	url:"/pages/tabBar/home/home"
				 })
			},
			totop() {
				this.scrollTopId="AB";
			},
			setLocationState(){
				// uni.$emit('updateCity',{cityname:that.city})
				let cityobj={
					latitude:that.latitude,
					longitude:that.longitude,
					name:that.city
				}
				that.locationcity(cityobj)
			},
			bindscroll(e){

			},
			bindBlur(e) {
				this.inputName=""
			},
			bindKeyInput(e) {
				this.inputName= e.detail.value
				this.auto()	
			},																	
			auto() {//自动搜索
				let inputSd = this.inputName.trim()
				let sd = inputSd.toLowerCase()//小写
				let num = sd.length;
				const cityList = city.cityObjs
				let finalCityList = []
				if(inputSd==""){
					this.completeList=[]
					return
				}
				
				// cityList.filter(function(item){})
				let temp = cityList.filter(
					item => {
						let text = item.short.slice(0, num).toLowerCase()
						return (text && text == sd)
					}
				)
				//在城市数据中，添加简拼到“shorter”属性，就可以实现简拼搜索
				let tempShorter = cityList.filter(
					itemShorter => {
						if (itemShorter.shorter) {
							let textShorter = itemShorter.shorter.slice(0, num).toLowerCase()
							return (textShorter && textShorter == sd)
						}
						return
					}
				)

				let tempChinese = cityList.filter(
					itemChinese => {
						let textChinese = itemChinese.city.slice(0, num)
						return (textChinese && textChinese == sd)
					}
				)

				if (temp[0]) {
					temp.map(
						item => {
							let testObj = {};
							testObj.city = item.city
							testObj.code = item.code
							finalCityList.push(testObj)
						}
					)
					this.completeList=finalCityList
				} else if (tempShorter[0]) {
					tempShorter.map(
						item => {
							let testObj = {};
							testObj.city = item.city
							testObj.code = item.code
							finalCityList.push(testObj)
						}
					);
					this.completeList=finalCityList
				} else if (tempChinese[0]) {
					tempChinese.map(
						item => {
							let testObj = {};
							testObj.city = item.city
							testObj.code = item.code
							finalCityList.push(testObj)
						})
					this.completeList=finalCityList
				} else {
					return
				}
			},
		},
		onLoad(option) {
			
			that=this;
			this.cityList = city.cityList();
			GetLocation(that)

		},
		onReady(){
			console.log('ready')
			const searchLetter = city.searchLetter;
			const sysInfo = uni.getSystemInfoSync();
			let inputsearch = uni.createSelectorQuery().select(".input");
			var inputHeight;
			
			inputsearch.boundingClientRect(data => {
				// console.log(data.height)
				inputHeight=data.height;
				const winHeight = sysInfo.windowHeight-inputHeight;
				const itemH = winHeight / searchLetter.length-2;
				let tempArr = [];
				searchLetter.map(
					(item,index) => {
						let temp = {};
						temp.name = item;
						temp.tHeight =  itemH;
						temp.bHeight = (index + 1) * itemH;
						tempArr.push(temp)
					}
				);
				that.searchLetter=tempArr
				that.winHeight=winHeight;
			}).exec();
			
			
		}
		
	}
</script>

<style>
	.page-body{background: #fff;}
	.container-inner {
		display: flex;
		flex-direction: row-reverse;
	}
	.container {
		flex-grow: 1;
		display: flex;
		flex-direction: column;
		/* padding-bottom:10upx ; */
	}

	input {
		text-align: center;
		font-size: 32upx;
		/* padding: 10upx; */
		height:36px;
		line-height:36px;
		background-color: #eee;
	}
	.searchLetter {
		flex-shrink: 0;
		width: 80upx;
		text-align: center;
		display: flex;
		flex-direction: column;
		color: #666;
	}

	.searchLetter view {
		/* padding-top: 20upx; */
		color:#8BC34A;
		font-size: 28upx;
	}

	.touchClass {
		background-color: #fff;
		color: #fff;
		/* padding-top: 16upx; 
		padding-bottom: 16upx;*/
	}

	.showSlectedLetter {
		background-color: rgba(0, 0, 0, 0.5);
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		top: 50%;
		left: 50%;
		margin: -100upx;
		width: 200upx;
		height: 200upx;
		border-radius: 20upx;
		font-size: 52upx;
		z-index: 1;
	}

	.selection {
		display: flex;
		width: 100%;
		flex-direction: column;
	}

	.selectCity {
		padding: 16upx;
		background-color: #f5f5f5;
		margin-bottom: -10upx;
	}

	.item_letter {
		display: flex;
		background-color: #f5f5f5;
		height: 60upx;
		line-height: 60upx;
		padding-left: 34upx;
		align-items: center;
		font-size: 26upx;
		color: #666;

	}

	.item_city {
		display: flex;
		background-color: #fff;
		height: 100upx;
		padding-left: 34upx;
		align-items: center;
		border-bottom: 1upx solid #ededed;
		font-size: 24upx;
		color: #666;
	}

	.hotcity-common {
		font-size: 24upx;
		color: #666;
		padding-bottom: 0;
		margin: 8upx 0;
		margin-left: 16upx;
	}

	.hotCity {
		padding-right: 50upx;
		margin: auto;
	}

	.thisCityName {
		display: inline-block;
		border: 1upx solid #8BC34A;
		border-radius: 8upx;
		padding: 10upx 0;
		font-size: 24upx;
		color: #8BC34A;
		text-align: center;
		min-width: 149.5upx;
		margin: 16upx 0;
	}

	.thishotText {
		color: #8BC34A;
		font-size: 20upx;
		margin: 0 !important;
	}

	.slectCity {
		border-color: #8BC34A !important;
	}

	.slectCity view {
		color: #8BC34A !important;
	}

	.weui-grid {
		padding: 10upx 0;
		width: 200upx;
		box-sizing: border-box;
		border: 1upx solid #ececec;
		border-radius: 8upx;
		background-color: white;
		margin: 8upx 0;
	}

	.weui-grids {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.weui-grid__label {
		display: block;
		text-align: center;
		color: #333;
		font-size: 24upx;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.ul {
		display: block;
		color: grey;
		padding-left: 20upx;
		color: #666;
		position: fixed;
		background: #fdfdfd;
		left: 0;
		width: 100%;
		border-bottom: 1px solid #e4e4e4;
		box-shadow: 0 1px 5px #e0e0e0;
		top:calc(var(--status-bar-height) +88upx+ 68upx);
		/*  #ifdef H5  */
		top:80px;
		/*  #endif  */
	}

	.li {
		display: block;
		font-weight: 100;
		font-size: 28upx;
		padding: 16upx 0;
	}



	.input {
		border-bottom: 1upx solid #f1f1f1;
	}

	.county {
		display: flex;
		flex-wrap: wrap;
	}

</style>
